![React + Material-UIのアプリで選択されているサイドバーメニューの項目を目立たせてみた](https://devio2023-media.developers.io/wp-content/uploads/2019/07/react.jpg)
React + Material-UIのアプリで選択されているサイドバーメニューの項目を目立たせてみた
こんにちは、CX事業本部の若槻です。
今回は、前回の記事で作成したReact + Material-UIのアプリで、選択されているサイドバーメニューの項目を目立たせてみました。
やりたいこと
サイドバーメニューのうち今開いているページの項目を強調して目立たせたいです。例えば商品ページが開かれているならメニュー中の「商品ページ」項目にスタイルを適用したいです。
アウトプット
「トップページ」「商品ページ」それぞれ選択時に次のようにスタイルを適用するようにしました。
- トップページを開いた時
-
商品ページを開いた時
やってみた
開いているページの項目の強調は、React Routerの<NavLink>
というAPIを使えば実現可能です。
ページのナビゲーションに<Link>
の代わりに<NavLink>
を使用しactiveStype
属性を定義することにより、現在のURLと一致する要素にスタイルを追加することができます。
現在は次のように<Link>
を使用してナビゲーションを実装しています。
<List> <Link to="/" className={classes.link}> <ListItem button> <ListItemIcon> <HomeIcon /> </ListItemIcon> <ListItemText primary="トップページ" /> </ListItem> </Link> <Link to="/products" className={classes.link}> <ListItem button> <ListItemIcon> <ShoppingCartIcon /> </ListItemIcon> <ListItemText primary="商品ページ" /> </ListItem> </Link> </List>
<NavLink>
はreact-router-dom
からインポートして使用します。
import { NavLink } from 'react-router-dom';
選択されたメニュー項目適用したいスタイルを定義します。ここでは文字色を青とし、下線を追加するようにしています。
const current = { color: 'blue', textDecoration: 'underline', };
<Link>
を<NavLink>
に変更し、それぞれに属性としてexact
、activeStyle={current}
属性を追加します。
<List> <NavLink exact to="/" className={classes.link} activeStyle={current}> <ListItem button> <ListItemIcon> <HomeIcon /> </ListItemIcon> <ListItemText primary="トップページ" /> </ListItem> </NavLink> <NavLink exact to="/products" className={classes.link} activeStyle={current}> <ListItem button> <ListItemIcon> <ShoppingCartIcon /> </ListItemIcon> <ListItemText primary="商品ページ" /> </ListItem> </NavLink> </List>
開いているページのメニュー項目に定義したスタイルが適用されるようになりました。
注意点として、今回の/
と/products
のようにURL同士でパス文字列を内包する場合は<NavLink>
の中でexact
属性を指定する必要があります。
指定しない場合は下記のように商品ページ(/products
)を開くと、<NavLink>
のto
属性で/
パスが含まれる「トップページ」と「商品ページ」の両方にスタイルが適用されてしまいます。
文字色にMaterial-UIのカラー定義を使用し、さらに背景色を適用したい場合は、以下のようにスタイルの定義を変更します。
const current = { color: colors.blue[800], textDecoration: 'none', background: colors.grey[100], width: '100%', display: 'inline-block', };
適用されるスタイルを変更できました。
おわりに
React + Material-UIのアプリで選択されているサイドバーメニューの項目を目立たせてみました。
フロントエンドの経験はあまりなかったのですが、こうやって画面のデザインを自分で考えてコントロールできるというのは楽しいですね!
参考
- REACT ROUTER
<NavLink>
| REACT TRAINING - react-router@v4を使ってみよう:シンプルなtutorial | Qiita
- 今から始めるReact入門 〜 React Router | Qiita
- style.textDecorationプロパティ | アルファシス
以上